<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="我的微信" placeholder bgColor="#fff"></u-navbar>
   <view class="content">
      <u-upload
        :fileList="userInfo.wechatQrCode"
        accept='image'
        name="wechatQrCode"
        :maxCount="1"
        @delete="deletePic($event, 'userInfo')"
        @afterRead="afterRead($event, 'userInfo')"
        :previewFullImage="true"
        width="702rpx"
        height="957rpx"
      ></u-upload>
      <view class="btn" @click="submit">确认提交</view>
   </view>
  </view>
</template>

<script>
import { uploadImage } from '@/common/util'
import { setUserInfo } from '@/api/index'

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    if(this.userInfo.wechatQrCode) {
      this.userInfo.wechatQrCode = [ 
        {
          status: "success",
          id: this.userInfo.userId,
          img: this.userInfo.wechatQrCode,
          type: 'wechatQrCode',
          url: this.userInfo.wechatQrCode
        }
      ]
    } else {
      this.userInfo.wechatQrCode = []
    }
  },
  methods: {
    submit() {
      if(this.userInfo.wechatQrCode.length === 0) {
        uni.showToast({
          icon: 'none',
          title: '请上传图片'
        })
        return
      }
      const that = this
      const wechatQrCode = this.userInfo.wechatQrCode.map(v => v.url).join()
      delete this.userInfo.roles
      setUserInfo({...this.userInfo, wechatQrCode}).then(res => {
        uni.showToast({
          icon: 'none',
          title: `修改成功`
        })
        setTimeout(() => {
          that.goBack()
        }, 1000)
      })
    },
    deletePic(event, name, index=-1) {
      if(index > -1) {
        const info = this[name][index]
        info[event.name].splice(event.index, 1)
        this.$set(this[name], index, info)
        return
      }
      this[name][event.name].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event, name, index=-1) {
      let lists = [].concat(event.file);
      for (let i = 0; i < lists.length; i++) {
        const res = await uploadImage(lists[0]);
        if(res.code != 200) {
          return
        }
        if(index > -1) {
          const info = this[name][index]
          info[event.name] = [
            {
              status: "success",
              id: res.data.url,
              img: res.data.url,
              type: event.name,
              url: res.data.url
            }
          ]
          this.$set(this[name], index, info)
          return
        } else {
          const img = [
            {
              status: "success",
              id: res.data.url,
              img: res.data.url,
              type: event.name,
              url: res.data.url
            }
          ]
          this.$set(this[name], event.name, img)
        }
        console.log(this[name]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
 .content ::v-deep.u-upload__button {
  background-color: #fff;
  margin: 0;
}
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    padding-top: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 120rpx;
    image {
      background-color: #fff;
      width: 702rpx;
      height: 702rpx;
      flex-shrink: 0;
    }
    .btn {
      width: 440rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      background: #56CB03;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      border: 2rpx solid #56CB03;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
